import React, { Component, Fragment } from 'react';
import styles from './index.less';
var timer = null;
class Border extends Component {
  constructor(props) {
    super(props);
    this.state = {
      _text: [],
      active: '',
      index: 0,
      isSuccess: false,
    };
  }
  componentDidMount() {}
  componentWillReceiveProps(nextProps) {
    let _index = 0;
    if (nextProps.isSuccess == true) {
      this.setState(
        {
          isSuccess: nextProps.isSuccess,
          _text: nextProps.text,
          active: nextProps.text[0],
        },
        () => {
          if (this.state.isSuccess == true) {
            if (timer) {
              return false;
            }
            timer = setInterval(() => {
              if (_index >= this.state._text.length - 1) {
                _index = -1;
              }
              _index = _index + 1;
              this.handleTabs(this.state._text[_index], _index);
            }, 10000);
          }
        },
      );
    }
  }
  componentWillUnmount() {
    clearInterval(timer);
  }
  handleTabs = (item, index) => {
    this.setState(
      {
        active: item,
        index: index,
      },
      () => {
        this.props.disTabs(this.state.active, this.state.index);
      },
    );
  };
  render() {
    const { _text, active } = this.state;
    return (
      <div>
        {_text.map((item, index) => {
          return (
            <div
              className={
                index == this.state.index ? styles.dpbox : styles._dpbox
              }
              onClick={this.handleTabs.bind(this, item, index)}
              // onClick={(e)=>this.handleTabs(item,index,e)}
              key={index}
            >
              <span className={styles.lt}></span>
              <span className={styles.rt}></span>
              <span className={styles.lb}></span>
              <span className={styles.rb}></span>
              <p>{item}</p>
            </div>
          );
        })}
      </div>
    );
  }
}
export default Border;
